<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
    // 关于list操作的内容进行了封装
    const listRelativeEffect=()=>{
        const {reactive}=Vue;
        const list=reactive([]);
        const addItemToList=(item)=>{
            list.push(item);
        }
        return {list,addItemToList};
    }
    // 关于inputValue操作的内容进行了封装
    const inputRelativeEffect=()=>{
        const {ref}=Vue;
        const inputValue=ref('');
        const handleInputValueChange=(e)=>{
            inputValue.value=e.target.value;
        }
        return {inputValue,handleInputValueChange};
    }
    const app = Vue.createApp({
        setup() {
            // 流程调度中转
            const {list,addItemToList} =listRelativeEffect();
            const {inputValue,handleInputValueChange} =inputRelativeEffect();
            return {
                list,addItemToList,
                inputValue,handleInputValueChange,
            }
        },
        template: `
        <div>
            <div>
                <input :value="inputValue" @input="handleInputValueChange" />
                <button @click="()=>addItemToList(inputValue)">提交</button>
            </div>
            <ul>
                <li v-for="(item,index) in list" :key="index">{{item}}</li>
            </ul>
        </div>
        `,
    })
    const vm = app.mount('#root')
</script>